<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Understanding Methods</title>
    <link rel="stylesheet" href="../../style.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <header class="nav">
        <a href="/">
          <img src=" /logo.svg" alt="logo" />
        </a>
        <a href="https://jsmastery.com/all-courses" target="_blank"
          >GSAP Course</a
        >
      </header>

      <div class="content">
        <div class="arrow">
          <a href="../../index.html">
            <img src=" /arrow.svg" alt="arrow" />
          </a>
        </div>

        <section>
          <h1>Understanding Methods</h1>

          <p>
            Understanding Methods in GSAP is about knowing the tools you can
            call on tweens, timelines, or the GSAP core to control animations.
          </p>
          <p>
            You can call methods like starting, pausing, reversing, killing, or
            sequencing them. These methods give you programmatic power over
            timing, flow, and interactivity.
          </p>
          <p>
            You can learn more about GSAP methods in the
            <a href="https://gsap.com/docs/v3/GSAP/Tween#methods">
              Official GSAP docs</a
            >.
          </p>
        </section>
      </div>

      <div class="demo flex-center">
        <button class="repeat">
          <img src="/repeat.svg" alt="repeat" />
        </button>

        <section class="flex-center justify-between flex-col gap-28">
          <div class="box"></div>

          <div class="controls">
            <button class="play">play</button>
            <button class="pause">Pause</button>
            <button class="resume">resume</button>
            <button class="restart">restart</button>
            <button class="reverse">reverse</button>
            <button class="kill">kill</button>
            <button class="yoyo">yoyo</button>
          </div>
        </section>
      </div>

      <script type="module" src="script.js"></script>
    </main>
  </body>
</html>
